<template>
    <div class="conTainer">
         <div class="search-area">
          <!-- 搜索部分 -->
          <div class="search_container">
            <div class="leftjt">
              <router-link to="/Index">
                <img class="zjts" :src="picture.zjt" alt="" />
              </router-link>
            </div>
            <div class="search">
                  <form action="" onsubmit="return false" @keyup.enter="handleSearchResult(input)">
                    <input v-model="input" type="text" placeholder="请输入搜索内容" @input="searchAction($event)">
                  </form>
                  <img :src="picture.serach" alt="ztj" @click="handleSearchResult(input)">
                  <img :src="picture.jd" alt="jd">
            </div>
          </div>
          <!-- 模糊搜索 -->
          <div v-if="searchResult.length > 0" class="mhsearch" v-show="isShow">
            <ul>
              <li v-for="( item ,index ) in searchResult" :key="index" @click="paus(item,index)">
                {{ item.value }}
              </li>
            </ul>
          </div>

          <div v-else class="mhsearch" v-show="isShow">
            <ul>
              <li v-for="item in restaurants" :key="item.id">
                {{ item.value }}
              </li>
            </ul>
          </div>

          <!-- 历史记录 -->
          <div>
            <div class="SearchHistory_content">
              <div class="history">搜索历史</div>
              <div class="icon"><i class="el-icon-delete deletes" @click="removeAl"></i></div>
           </div>
              <div class="history">
                <span class="norecord" v-if="historyList.length == 0">暂无搜索记录</span>
                <span
                  class="record"
                  v-else
                  v-for="(historyItem, index) in historyList"
                  :key="index"
                  @click="handleSearchResult(historyItem)"
                >
                  {{historyItem}}
                </span>
              </div>
          </div>
          
        </div>
         <Mabeylike />
         

    </div>
</template>

<script>

import { throttle } from '../../libs/utils'
import Mabeylike from './Mabeylike.vue'
import { MessageBox } from 'mint-ui';

export default {
    name: 'Search',
    components:{
      Mabeylike,
    },
    data() {
        return {
            picture:{
                jd:require('@/assets/images/京东.png'),
                serach:require('@/assets/images/搜索.png'),
                zjt: require("@/assets/images/左箭头.png"),
            }, 
            searchResult:[],
            restaurants: [
          { id:1,"value": "篮球鞋"},
          { id:2,"value": "电脑"},
          { id:3,"value": "拉杆箱"},
          { id:4,"value": "加湿器"},
          { id:5,"value": "显卡"},
          { id:6,"value": "笔记本note"},
          { id:7,"value": "金龙鱼油"},
          { id:8,"value": "蓝牙音箱"},
          { id:9,"value": "蓝牙耳机"},
          { id:10,"value": "破壁机"},
          { id:11,"value": "热水壶"},
          { id:12,"value": "冲锋衣"},
          { id:13,"value": "鲜奶"},
          { id:14,"value": "足球鞋"},
          { id:15,"value": "足球"},
          { id:16,"value": "小米手机"},
          { id:17,"value": "iphone"},
          { id:18,"value": "华为"},
          { id:19,"value": "席梦思"},
          { id:20,"value": "木质床"},
          { id:21,"value": "口罩"},
          { id:22,"value": "手套"},
          { id:23,"value": "红酒"},
          { id:24,"value": "键盘"},
          { id:25,"value": "鼠标"},
          { id:26,"value": "加绒被"},
          { id:27,"value": "空调被"},
          { id:28,"value": "vivo手机"},
          { id:29,"value": "红米"},
          { id:30,"value": "红米k30"},
          { id:31,"value": "红米k20"},
          { id:32,"value": "红米k30pro"},
          { id:33,"value": "红米k50"},
          { id:34,"value": "红米k50pro"},
          { id:35,"value": "衣架"},
          { id:36,"value": "多功能鞋盒"},
          { id:37,"value": "多功能燃气灶"},
          { id:38,"value": "多功能剪刀"},
          { id:39,"value": "小米充电宝"},
          { id:40,"value": "小米13pro"},
          { id:41,"value": "小米智能手环"},
          { id:42,"value": "小米手表"},
          { id:43,"value": "小米平板"},
          { id:44,"value": "......"},
            ],
          input:'',
          isShow:false,
          historyList: [],
        };
    },
  
    mounted () {
    if (localStorage.getItem('localHistory') !== null) {
      this.historyList = localStorage.getItem('localHistory').split('|')
    }
    },
  
    methods: {
    //执行搜索
    handleSearchResult (val) {
      if (val === '') {
        alert('请输入搜索内容！')
        return
      } 
      this.setlocalHistory(val) // 将搜索值加入本地localStorage
      this.historyList = localStorage.getItem('localHistory').split('|') // 从本地localStorage取出搜索历史并展示
      this.input = '' // 清空输入框
      this.isShow =false;
      

      // 跳转至搜索结果页
      this.$router.push({
        name:'list',
        query:{
          key:val
        }
      })
    
    },
    //加入历史搜索记录
    setlocalHistory (val) {
      val = val.trim()
      let localHistory = localStorage.getItem('localHistory') //拿到本地存储
      // 判断是否存在本都存储
      if (localHistory === null) {
        // 没有
        localStorage.setItem('localHistory', val) // 若未设置过则直接设置本地存储
      }else {
        // 有
        let localHistoryArray = localHistory.split('|').filter(item => item != val) // 删除搜索历史中与本次输出重复项
        // 增加数据
        if (localHistoryArray.length > 0) {
          localHistory = val + '|' + localHistoryArray.join('|') // 新增记录
        }
        if (localHistory.split('|').length > 10) { // 最大历史搜索记录10条
          localHistoryArray = localHistory.split('|')
          localHistoryArray.pop() // 删除最旧一项
          localHistory = localHistoryArray.join('|')
        }
        localStorage.setItem('localHistory', localHistory) // 存入本地
      }
    },
     //清空历史搜索记录
     removeAl () {
      // 引入的mintui里面的消息提示组件
      MessageBox({
      title: '提示',
      message: '确定执行此操作?',
      showCancelButton: true
    }).then(res=>{
      // console.log(res);
      if (res == 'confirm') {
        localStorage.removeItem('localHistory') // 清空搜索历史
        this.historyList = [];//清空页面渲染的数据
      }
    });
      },
    // 模糊搜索
    searchAction: throttle ( function (e) {
      if (this.input !='') {
        this.isShow=!this.isShow
      }else if(this.input =''){
        this.isShow =false
      }
      const inputValue = e.target.value ;

      this.searchResult = this.restaurants.filter((item)=>{
        if (item.value.includes(inputValue)) {
          return item;
        }
      })
    },1000),
    paus(item, index){
      console.log(index);
      console.log(item.value);
      this.input = item.value
      this.isShow = !this.isShow
    }
  },
};
</script>

<style scoped>
.conTainer{
  width: 400px;
  margin: 0 auto;
  height: 1880px;
}
.search_container{
  display: flex;
  height: 44px;
  background: linear-gradient(white, rgb(241, 241, 241));
  border-bottom: 2px solid #e0e0e0;
}

.search{
  display: flex;
  width: 359px;
}
.search img{
  width: 25px;
  height: 25px;
  margin-top: 10px;
  cursor: pointer;
}
.search input{
  width: 280px;
  margin-top: 10px;
  border: 1px solid rgb(216, 216, 216);
  outline: none;
  height: 25px;
  margin-left: 15px;
  border-radius: 18px;
}
.header{
  margin: 0 auto;
  width: 400px;
  height: 44px;
  display: flex;
  background: linear-gradient(white, rgb(241, 241, 241));
  border-bottom: 2px solid #e0e0e0;
}
.zjts{
  width: 30px;
  height: 30px;
  margin-top: 9.5px;
  margin-left: 10px;
}
.SearchHistory_content{
  margin-top: 30px;
  width: 400px;
  height: 40px;
  display: flex;
  background: #f4f4f4;;
}
.history{
  width: 90%;

  font-weight: bolder;
}
.icon>i{
  margin-top: 12px;
  margin-left: 10px;
  cursor: pointer;
}
.history {
  margin-top: 10px;
}
.history .norecord {
  font-size: 12px;
  color: #aaa;
}
.history .record {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 5px;
  background-color: #f6f6f6;
  font-size: 12px;
  color: #333;
  margin-right: 10px;
  margin-top: 5px;
  cursor: pointer;
}
.mhsearch{
  width: 280px;
  height: 200px;
  margin-left: 55px;
  overflow-y: scroll;
  border: 1px solid rgb(216, 216, 216);
}
.mhsearch ul{
  margin: 0;
}
.mhsearch ul li{
  list-style: none;
  padding-left: 10px;
  line-height: 40px;
}
.mhsearch ul li:hover{
  background: #e0e0e0;
}
</style>